<template>
  <div class="detail_page">
    <!-- 导航 开始 -->
    <nav-bar title="详情"></nav-bar>
    <!-- 导航 end -->

    <!-- 头部 开始 -->
    <div class="banner"></div>
    <!-- 头部 end -->

    <!-- 医院信息 开始 -->
    <div class="hospital_info">
      <div class="left">
        <!-- 医院名称 开始 -->
        <div class="head">{{ oInfo.hospitalName }}</div>
        <!-- 医院名称 end -->

        <div class="rate">
          <div class="box">
            <span class="name">法定代表人</span>
            <span class="txt">{{ oInfo.legalPerson }}</span>
          </div>
          <div class="box">
            <span class="name">注册资本</span>
            <span class="txt">{{ oInfo.registeredCapital }}</span>
          </div>
          <div class="box">
            <span class="name">成立时间</span>
            <span class="txt">{{ oInfo.establishDate }}</span>
          </div>
        </div>

        <!-- 地址 开始 -->
        <div class="address">
          <img src="@/assets/images/location@x2.png" class="img" alt="" />
          <span
            >{{ oInfo.provinceName }}{{ oInfo.cityName }}{{ oInfo.districtName
            }}{{ oInfo.address }}</span
          >
        </div>
        <!-- 地址 end -->
      </div>

      <!-- 医院头像 开始 -->
      <div class="avatar">
        <li-image
          :src="oInfo.hospitalLogo"
          class="img"
          v-if="oInfo.hospitalLogo"
        ></li-image>
        <TextLogo :name="oInfo.textLogo" v-else-if="oInfo.textLogo"></TextLogo>
        <img src="@/assets/images/avatar.png" class="img" alt="" v-else />
      </div>
      <!-- 医院头像 end -->
    </div>
    <!-- 医院信息 end -->

    <!-- 营业执照 开始 -->
    <div class="sigle_box">
      <h2 class="h2_title">营业执照</h2>
      <div class="certification">
        <div class="img_box">
          <template
            v-if="oInfo.businessLicense && oInfo.businessLicense.length"
          >
            <li-image
              :src="item"
              v-for="(item, index) in oInfo.businessLicense || []"
              :key="index"
            ></li-image>
          </template>
          <img src="@/assets/images/h_banner.png" alt="" v-else />
        </div>
        <div class="cell_right_box">
        <div class="cell_list">
          <div class="cell_box">
            <div class="name">营业期限：</div>
            <div class="txt">{{ oInfo.businessTerm }}</div>
          </div>
          <div class="cell_box">
            <div class="name">法人：</div>
            <div class="txt">{{ oInfo.legalPerson }}</div>
          </div>
        </div>
        <div class="cell_list">
          <div class="cell_box">
            <div class="name">统一社会编码：</div>
            <div class="txt">{{ oInfo.businessLicenseNumber }}</div>
          </div>
          <div class="cell_box">
            <div class="name">注册资金：</div>
            <div class="txt">{{ oInfo.registeredCapital }}</div>
          </div>
        </div>
    </div>
      </div>
      <div class="cell_box">
        <div class="name">经营范围：</div>
        <div class="txt" v-html="oInfo.businessScope"></div>
      </div>
    </div>
    <!-- 营业执照 end -->

    <!-- 医疗许可证 开始 -->
    <div class="sigle_box">
      <h2 class="h2_title">医疗许可证</h2>
      <div class="certification">
        <div class="img_box">
          <template
            v-if="oInfo.practiceLicense && oInfo.practiceLicense.length"
          >
            <li-image
              :src="item"
              v-for="(item, index) in oInfo.practiceLicense || []"
              :key="index"
            ></li-image>
          </template>
          <img src="@/assets/images/h_banner.png" alt="" v-else />
        </div>
        <div class="cell_list">
          <div class="cell_box">
            <div class="name">证件有效期：</div>
            <div class="txt">{{ oInfo.licenseValidity }}</div>
          </div>
          <div class="cell_box">
            <div class="name">医院资质：</div>
            <div class="txt">{{ oInfo.hospitalQualification }}</div>
          </div>
          <!-- <div class="cell_box">
              <div class="name">统一社会编码：</div>
              <div class="txt">{{ oInfo. }}</div>
            </div> -->
        </div>
      </div>
      <div class="cell_box">
        <div class="name">诊疗科目：</div>
        <div class="txt" v-html="oInfo.treatmentSubject"></div>
      </div>
    </div>
    <!-- 医疗许可证 end -->

    <!-- 风险预警 开始 -->
    <div class="sigle_box">
      <h2 class="h2_title">风险预警</h2>
      <div class="content">暂未上线，敬请期待</div>
    </div>
    <!-- 风险预警 end -->

    <!-- 更多信息 开始 -->
    <div class="sigle_box">
      <div class="h2_title">更多信息</div>
      <div class="more_info" v-html="oInfo.detailIntroduce"></div>
    </div>
    <!-- 更多信息 end -->
  </div>
</template>
  <script>
import { GET_QUALIFICATION_HOSPITAL_INFO } from "@/http/interface";
import TextLogo from "@/components/logo/index.vue";
export default {
  components: {
    TextLogo,
  },
  data() {
    return {
      oInfo: {},
      title: "",
      description: "",
      keywords: "",
      hospitalId:''
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
      ],
      link: [
        {
          ref: "canonical",
          href: `${this.$domain}/inquire/hospital/${this.hospitalId}`,
        },
      ],
    };
  },
  async asyncData({ query, $axios, params }) {
    let res = await $axios.get(GET_QUALIFICATION_HOSPITAL_INFO, {
      params: { id: params.id },
    });
    let oInfo = res.data || {};
    console.log(oInfo);
    return {
      oInfo,
      title: oInfo.seoTitle,
      keywords: oInfo.seoKeywords,
      description: oInfo.seoDescription,
      hospitalId:params.id
    };
  },
};
</script>
  <style lang="less" scoped>
@import "/assets/styles/inquire/inquire_hospital.less";
</style>